<template>
	<div class="main">
		<div class="outDiv">
			<go-back aa='../chooseCourse/addIntention'></go-back>
			<h2 class="fixh2">优势科目排序</h2>
			<div>
				<!-- <Header contentTitle="优势科目排序"></Header> -->
				<div class="advanmain">
					<div class="careerTests">
						<div class="title">
							<div class="left">请选择一种优势科目排序方式</div>
							<!-- 						<div class="right" v-show="careerList.length > 0" @click="commonJs.gosto('chooseRecord')">换一组</div> -->
						</div>
						<div class="tabBar flex-h">
							<span @click="tabs(1)" class="sp flex1">
								<img class="imgIcon" :src="tabsNum==1?imgs1:imgs2" alt="">
								<b>测评排序</b>
							</span>
							<span @click="tabs(2)" class="sp flex1">
								<img class="imgIcon" :src="tabsNum==2?imgs1:imgs2" alt="">
								<b>手动排序</b>
							</span>
						</div>
						<div v-show="tabsNum==1">
							<scroller style="top: 2.6rem;">
								<div style="padding: 0 0.3rem;box-sizing: border-box;">
									<div class="content_no_add" v-if="careerList.length == 0">
										<p>尚未进行优势科目测评</p>
										<button @click="commonJs.gosto('chooseTest')">去测评</button>
									</div>
									<div v-if="careerList.length > 0">
										<div class="ysBox">
											<span class="spys" v-for="(item,index) in careerList" :key='index'><i>NO.{{index+1}}</i><b>{{item}}</b></span>
											<span class="gocp" @click="commonJs.gosto('chooseTest')">重新测评</span>
										</div>
									</div>
								</div>
							</scroller>
						</div>
						<div v-show="tabsNum==2">
							<div>
								<div class="titlesDrag flex-h">
									<span class="sp1">优</span>
									<span class="flex1 sp2">以下科目可长按图标拖动排序</span>
								</div>
								<div>
									<specIssue :items='ites2' v-on:fromChildData='getChildData'></specIssue>
								</div>


								<div class="titlesDrag titlesDrag1 flex-h">
									<span class="sp1">劣</span>
									<span class="flex1 sp2"></span>
								</div>
								<!-- 	<div class="commonBox zyxq">
										<span class="sp3" @click="nextZu('IndResult')">做完了</span>
									</div> -->
							</div>
						</div>


					</div>

				</div>
				<div style="width: 100%;height: 2.8rem;"></div>
			</div>
			<!-- </scroller> -->
		</div>
		<div class="botFixed">
			<span @click="goNext" class="ss2">下一步</span>
		</div>
	</div>
</template>

<script>
	import Header from '~/components/Header'
	import goBack from '~/components/goBack'
	import axios1 from '~/plugins/axios1';
	import specIssue from '~/components/specIssue'
	import ls from 'store2'
	export default {
		components: {
			Header,
			specIssue,
			goBack
		},
		data() {
			return {
				zhuanye: [],
				careerList: [],
				careerChooseList: [],
				botList: [],
				hasCho_1: true,
				hasCho_2: true,
				hasCho_3: false,
				xNum: this.$store.state.xxNum,
				tabsNum: 1,
				ites2: [{
					nm: '历史',
					type: 'R'
				}, {
					nm: '化学',
					type: 'I'
				}, {
					nm: '地理',
					type: 'A'
				}, {
					nm: '政治',
					type: 'S'
				}, {
					nm: '生物',
					type: 'E'
				}, {
					nm: '物理',
					type: 'C'
				}],
				strs: '历史化学地理政治生物物理',
				strs1: '',
				stall: '',
				imgs1: require('~/static/images/icon_circle_s.png'),
				imgs2: require('~/static/images/icon_circle_n.png')
			}
		},
		created() {
			this.commonJs.gologins();
			console.log()
			let sts = ls.get('jgpx')
			if (sts) {
				this.careerList = sts;

				sts.forEach(i => {
				this.strs1 += i
				})
				console.log('this.strs1', this.strs1)
				console.log('dasss', this.careerList)
			}

		},
			mounted: function() {
	
			if(this.commonJs.isTerminal()=='isAndroid'){
			if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
			}
			}
		},
		destroyed() {
			// this.commonJs.xahui('../chooseCourse/addIntention')
			window.removeEventListener('popstate', this.fun, false); 
		},
		methods: {
					fun() {
				this.$router.replace({
					path: '../chooseCourse/addIntention'
				
				})
			
			},
			handleTouchMove() {
				console.log(11)
			},
			getChildData(data) {
				let str = '';
				data.forEach(item => {
					str += item.nm
				})
				this.childData = data;
				this.strs = str
				console.log(str)
				console.log(this.childData)
			},
			tabs(mun) {
				console.log('mun',mun)
				this.tabsNum = mun
				mun === 1 ? this.stall = this.strs1 : this.stall = this.strs
			},
			goNext() {
				console.log(this.stall)
			
				if (this.tabsNum == 1) {
					this.stall = this.strs1;
				}else{
					this.stall = this.strs;
				}
				if (this.stall == '') {
					this.$vux.toast.text('请测评后进行下一步')
					return false;
				}
				ls.set('preUrl', 'advanCourse')
				this.commonJs.gosto('bestPlan', this.stall)

			},




			goback() {

			},

			goto(routerName, queryData) {
				this.$router.push({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.titlesDrag {
		width: 100%;
		height: 0.8rem;
		margin-top: 0rem;

		.sp1,
		.sp2 {
			font-size: 0.26rem;
			font-weight: bold;
			box-sizing: border-box;
			height: 0.8rem;
		}

		.sp1 {
			width: 1.5rem;
			padding-top: 0.4rem;
			color: rgba(82, 196, 26, 1);

		}

		.sp2 {
			padding-top: 0.2rem;

			color: rgba(187, 187, 187, 1);

		}
	}

	.titlesDrag1 {
		height: 0.4rem;
		margin-top: 0;
		font-size: 0.3rem;

		.sp1,
		.sp2 {
			height: 0.4rem;
			padding-top: 0;
			color: rgba(187, 187, 187, 1);
		}
	}

	.botFixed {
		position: fixed;
		height: 1.2rem;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
		left: 0;
		bottom: 0;
		width: 7.5rem;
		overflow: hidden;

		span {
			width: 3.8rem;
			height: 0.7rem;
			// background: rgba(108, 191, 32, 1);
			border-radius: 0.35rem;
			font-size: 0.3rem;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			display: block;
			line-height: 0.7rem;
			margin: 0.25rem auto;
		}

		.ss1 {
			background: #eee
		}

		.ss2 {
			background: rgba(108, 191, 32, 1);
		}
	}

	.header {
		width: 100%;
		height: 0.88rem;
		text-align: right;
		padding: 0 0.3rem;
		background: transparent;
		font-size: 0.3rem;
		letter-spacing: 0.05rem;
		color: #222;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.imgIcon {
			width: 0.4rem;
			height: 0.4rem;
		}
	}

	.outDiv {
		.fixh2 {
			position: fixed;
			left: 0.6rem;
			top: 0;
			font-size: 0.4rem;
			width: 6.3rem;
			height: 0.8rem;
			text-align: center;
			line-height: 0.8rem;
		
			color: #222;
			font-weight: bold;
		}

		width: 100%;
		height: 100vh;
		background: #FFF;

		.advanmain {
			margin-top: 0.2rem;
			padding: 0 0.3rem;

			.careerTests {
				margin-bottom: 0.31rem;

				.title {
					height: 0.6rem;
					line-height: 0.6rem;
					// margin-bottom: 0.32rem;
					display: block;
					letter-spacing: 0.02rem;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						color: #222;
						font-weight: bold;
						font-size: 0.3rem;
					}

					.right {
						font-size: 0.26rem;
						font-weight: bold;
						color: #6CBF20;
					}
				}

				.tabBar {
					width: 100%;
					height: 0.8rem;
					border-radius: 0.4rem;
					border: 1px solid rgba(238, 238, 238, 1);
					margin-bottom: 0.2rem;

					.sp {
						text-align: center;

						img {
							width: 0.4rem;
							height: 0.4rem;
							// background: red;
							vertical-align: middle;
						}

						b {
							font-size: 0.3rem;

							font-weight: bold;
							color: rgba(34, 34, 34, 1);
							line-height: 0.8rem;
							vertical-align: middle;
							margin-left: 0.15rem;
						}
					}

				}

				.content_no_add {
					width: 100%;
					height: 3rem;
					background: #FAFAFA;
					border-radius: 0.1rem;
					text-align: center;
					padding-top: 0.9rem;

					p {
						font-size: 0.26rem;
						font-weight: bold;
						color: #999;
						margin-bottom: 0.2rem;
					}

					button {
						width: 1.8rem;
						height: 0.6rem;
						line-height: 0.6rem;
						text-align: center;
						border-radius: 0.1rem;
						border: 2px solid #6CBF20;
						color: #6CBF20;
						font-size: 0.26rem;
						font-weight: bold;
						letter-spacing: 0.03rem;
						background: transparent;
						padding: 0;
						outline: none;
					}
				}

				.ysBox {
					width: 100%;
					height: auto;

					padding: 0 0.3rem;
					box-sizing: border-box;

					overflow: hidden;

					.spys {
						margin-bottom: 0.3rem;
						display: block;
						width: 100%;
						height: 0.8rem;
						text-align: center;
						line-height: 0.8rem;
						background: rgba(250, 250, 250, 1);
						border-radius: 0.1rem;

						i {
							font-size: 0.34rem;
							font-family: 'DIN-Bold';
							font-weight: bold;
							color: rgba(187, 187, 187, 1);
						}

						b {
							font-size: 0.34rem;
							font-weight: bold;
							color: rgba(102, 102, 102, 1);
							margin-left: 0.2rem;
						}
					}

					.gocp {
						display: block;
						text-align: center;
						height: 0.5rem;
						font-size: 0.3rem;
						font-family: 'PingFang-SC-Bold';
						font-weight: bold;
						color: rgba(108, 191, 32, 1);

					}
				}



			}


		}
	}
</style>
